import {Component} from 'react';
import React from 'react';
import {connect} from 'umi';
import {Divider, Space, Modal, Empty, Button} from 'antd';
import HighPerformTable from '@/components/HighPerformTable';
import APIS from '@/apis';
import CommentItem from '@/components/CommentItem';

// import { type } from '../../../config/defaultSettings';

class CommentPage extends Component<any, any> {

  actionRef: any;


  requestGetData(
    params: {
      pageSize?: number;
      current?: number;
    },
    sorter: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) {

    return APIS.CourseAPI.GetCourseList({current: 1, pageSize: 20, state: -1})
  }

  constructor(props: any) {
    super(props);
    this.state = {
      allExam: [],
      visible: false,
      comments: [],
      page: 1,
      id: 0,
      total: 0
    }
  }

  componentDidMount() {
    //APIS.CourseAPI.GetCourseList({ current: 1, pageSize: 20, state: -1 }).then(res=>{for(let itme in res.data){res.data[itme]['state']=courseState[res.data[itme]['state']];console.log(res.data[itme]['state'])}})
  }

  openModal = (e: any) => {
    console.log(e);
    this.getCommentData(e, 1, 10);
    this.setState({id: e, visible: true})
  }

  getCommentData(id: number, page: number, pageSize: number) {
    APIS.CourseAPI.GetCourseComment({id: id, page: page, pageSize: pageSize}).then(resp => {
      console.log(resp);
      if (resp.code === 10000) {
        this.setState({comments: resp.data.records, total: resp.data.total})
      }
    }).catch(e => console.error(e));
  }

  closeModal = () => {
    this.setState({visible: false, page: 1, id: 0})
  }
  getMore = () => {
    let page = this.state.page;
    page = page + 1;
    this.getCommentData(this.state.id, 1, page * 10);
    this.setState({page})
  }
  private deserializeCommentTree = (node: any) => {
    if (node.replies.length > 0) {
      return node.replies.map((element: any, index: any) => {
        if (element.replies.length > 0) {
          return <div key={element.id}>
            <CommentItem key={element.id} comment={element} reply={node.nickname}>
            </CommentItem>
            {
              this.deserializeCommentTree(element)
            }
          </div>
        } else {
          return <CommentItem key={element.id} comment={element} reply={node.nickname}>
          </CommentItem>
        }

      })
    }
    return null;
  }
  clomns: any = [
    {
      title: '课程名称',
      dataIndex: 'courseName',
    },
    {
      title: '课程状态',
      dataIndex: 'state',
      render: (data: any) => {
        return (
          <Space>
            <span>
              {
                courseState[data]
              }
            </span>
          </Space>
        );
      },
    },
    {
      title: '评论详情',
      dataIndex: 'id',
      render: (data: any) => {
        return (
          <Space>
            <a onClick={this.openModal.bind(this, data)}>
              查看
            </a>
          </Space>
        );
      },
    },
  ];

  handleDataImport() {
  }

  handleDataExport() {
  }

  render() {
    const {comments, page, total} = this.state
    console.log(comments)
    return (
      <div>
        {/* <KeywordFilterSearch
          filters={[
            {
              title: '学院',
              multiple: false,
              keywords: ['全部', '计算机学院', '轨道交通学院', '电气工程学院'],
            },
            { title: '年级', multiple: false, keywords: ['全部', '2015', '2016', '2017', '2018'] },
          ]}
        ></KeywordFilterSearch> */}
        <Divider></Divider>
        <HighPerformTable<any>
          ref={(ref) => (this.actionRef = ref)}
          requestGetData={this.requestGetData.bind(this)}
          action={true}
          additionOptions={[
            {
              title: '查看',
              onClick: (record: any) => {
                this.props.history.push({pathname: '/teaching/check/students', state: record.id});
              },
            },
          ]}
          // toolBarRender={() => [
          //   <Button key={0} type="primary" onClick={() => this.actionRef.handleModalVisible(true)}>
          //     <PlusOutlined /> 新增班级
          //   </Button>,
          //   <Button key={1} type="primary" onClick={() => this.handleDataImport()}>
          //     批量导入
          //   </Button>,
          //   <Button key={2} type="primary" onClick={() => this.handleDataExport()}>
          //     批量导出
          //   </Button>,
          // ]}
          columns={this.clomns}
        />
        <Modal
          title="评论详情"
          centered
          visible={this.state.visible}
          footer={null}
          maskClosable={false}
          onCancel={this.closeModal.bind(this)}
          width={700}
        >
          <div style={{height: 500, overflowY: "auto"}}>
            {
              comments.length > 0 ?
                comments.map((element: any, index: any) => {
                  return <CommentItem key={element.id} comment={element} reply={null}>
                    {
                      this.deserializeCommentTree(element)
                    }
                  </CommentItem>
                })
                : <Empty/>
            }
            {
              comments.length > 0 && page * 10 < total ?
                <Button style={{marginLeft: 300}} type={'primary'} onClick={this.getMore.bind(this)}>更多</Button> : null
            }
          </div>
        </Modal>
      </div>
    );
  }
}

export default connect()(CommentPage);

enum courseState {
  禁用 = 0,
  上线,
  待提交审核,
  审核中,
  审核失败,
  审核成功等待上线
}
